import QtQuick 2.4
import QtQuick.Controls 1.4

Item {
    id: item1
    width: 689
    height: 470
    property alias modePageListModel: modePageListModel
    property alias listView: listView
    property alias addRectange: addRectange
    property alias modeNameTextField: modeNameTextField
    property alias xdComboBox: xdComboBox
    property alias xdTimeTextField: xdTimeTextField
    property alias xdTempTextField: xdTempTextField
    property alias pxComboBox: pxComboBox
    property alias pxTimeTextField: pxTimeTextField
    property alias pxTempTextField: pxTempTextField
    property alias pxClearComboBox: pxClearComboBox
    property alias xcomboBox: xcomboBox
    property alias xTimeTextField: xTimeTextField
    property alias xTempTextField: xTempTextField
    property alias xdyComboBox: xdyComboBox
    property alias hgComboBox: hgComboBox
    property alias hgTimeTextField: hgTimeTextField
    property alias confirmButton: confirmButton
    signal selectModelID(int id)

    ListView {
        id: listView
        contentHeight: 60
        //contentWidth: 500
        anchors.right: parent.right
        anchors.rightMargin: 8
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 8
        anchors.top: listViewHeader.bottom
        anchors.topMargin: 0
        //property alias modeListModel: listView1.model
        delegate: Item {
            id: item2
            x: 5
            width: parent.width
            height: 85
            property int itemModeId: itemID

            Rectangle {
                id: rectangle
                color: "grey"
                radius: 10
                anchors.bottom: item2.bottom
                anchors.bottomMargin: 4
                anchors.top: item2.top
                anchors.topMargin: 2
                anchors.left: item2.left
                anchors.leftMargin: 0
                anchors.right: item2.right
                anchors.rightMargin: 4
                scale: itemMouseArea1.pressed ? 1.1 : 1.0
                Text {
                    id: modeName
                    width: 100
                    text: modeNameT
                    color: "#ffffff"
                    font.family: "微软雅黑"
                    font.pixelSize: 18
                    font.bold: true
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 8
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 0
                    anchors.top: parent.top
                    anchors.topMargin: 0
                }
                ListView {
                    id: listView1
                    width: 500
                    orientation: ListView.Horizontal
                    contentWidth: 500
                    anchors.left: modeName.right
                    anchors.leftMargin: 10
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 0
                    anchors.top: parent.top
                    anchors.topMargin: 0
                    delegate: Item {
                        id: item3
                        width: 80
                        height: 80
                        Rectangle {
                            id: rectangle1
                            anchors.bottom: parent.bottom
                            anchors.bottomMargin: 0
                            anchors.top: parent.top
                            anchors.topMargin: -1
                            anchors.left: parent.left
                            anchors.leftMargin: 0
                            anchors.right: parent.right
                            anchors.rightMargin: -1
                            color: "grey"
                            border.color: "#26363d"
                            Text {
                                id: modeNameText
                                text: modeNameTxt
                                font.bold: true
                                font.pointSize: 10
                                color: "#ffffff"
                                anchors.top: parent.top
                                anchors.topMargin: 4
                                anchors.right: parent.right
                                anchors.rightMargin: 0
                                anchors.left: parent.left
                                anchors.leftMargin: 0
                                verticalAlignment: Text.AlignVCenter
                                horizontalAlignment: Text.AlignHCenter
                                font.family: "微软雅黑"
                            }
                            Text {
                                id: temperatureText
                                text: tempTxt + "°C"
                                //font.bold: true
                                font.pointSize: 8
                                color: "#ffffff"
                                anchors.top: modeNameText.bottom
                                anchors.topMargin: 1
                                anchors.right: parent.right
                                anchors.rightMargin: 0
                                anchors.left: parent.left
                                anchors.leftMargin: 0
                                verticalAlignment: Text.AlignVCenter
                                horizontalAlignment: Text.AlignHCenter
                                font.family: "微软雅黑"
                            }
                            Text {
                                id: dosageText
                                text: dosageTxt + ""
                                //font.bold: true
                                font.pointSize: 8
                                color: "#ffffff"
                                anchors.top: temperatureText.bottom
                                anchors.topMargin: 1
                                anchors.right: parent.right
                                anchors.rightMargin: 0
                                anchors.left: parent.left
                                anchors.leftMargin: 0
                                verticalAlignment: Text.AlignVCenter
                                horizontalAlignment: Text.AlignHCenter
                                font.family: "微软雅黑"
                            }
                            Text {
                                id: timeText
                                text: timeTxt + qsTr("分钟")
                                //font.bold: true
                                font.pointSize: 8
                                color: "#ffffff"
                                anchors.top: dosageText.bottom
                                anchors.topMargin: 1
                                anchors.right: parent.right
                                anchors.rightMargin: 0
                                anchors.left: parent.left
                                anchors.leftMargin: 0
                                verticalAlignment: Text.AlignVCenter
                                horizontalAlignment: Text.AlignHCenter
                                font.family: "微软雅黑"
                            }
                        }
                    }
                    model: ListModel {
                        id: childListmm
                    }
                }
            }
            MouseArea {
                id: itemMouseArea1
                anchors.fill: parent
            }
            Connections {
                target: itemMouseArea1
                onClicked: {
                    item1.selectModelID(itemModeId)
                }
            }
        }
        model: ListModel {
            id: modePageListModel
            //property alias childListmm: childListmm
        }
    }
    Rectangle {
        id: listViewHeader
        height: 40
        anchors.top: parent.top
        anchors.topMargin: 16
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        color: "#01232b"
        Text {
            id: modeNameHeader
            width: 100
            text: qsTr("模式名称")
            font.pixelSize: 14
            color: "#ffffff"
            font.bold: true
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.top: parent.top
            anchors.topMargin: 0
        }
        Text {
            id: processHeader
            width: 320
            text: qsTr("流程")
            font.pixelSize: 14
            color: "#ffffff"
            font.bold: true
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            anchors.left: modeNameHeader.right
            anchors.leftMargin: 0
            anchors.top: parent.top
            anchors.topMargin: 0
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
        }
        Item {
            id: addItem
            width: 40
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.top: parent.top
            anchors.topMargin: 0
            anchors.right: parent.right
            anchors.rightMargin: 0
            scale: addMouseArea.pressed ? 0.9 : 1.0
            Image {
                id: addImage
                anchors.fill: parent
                source: "images/add.png"
            }
        }
        MouseArea {
            id: addMouseArea
            anchors.fill: parent
        }
    }

    Rectangle {
        id: addRectange
        visible: false
        anchors.top: parent.top
        anchors.topMargin: 16
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        color: "#26363d"
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
        MouseArea {
            anchors.fill: parent
        }

        TextField {
            id: modeNameTextField
            x: 218
            width: 214
            height: 52
            font.pixelSize: 14
            anchors.top: parent.top
            anchors.topMargin: 16
            anchors.horizontalCenter: parent.horizontalCenter
            font.bold: true
            placeholderText: qsTr("输入模式名称")
        }

        ComboBox {
            id: xdComboBox
            anchors.left: parent.left
            anchors.leftMargin: 8
            anchors.top: modeNameTextField.bottom
            anchors.topMargin: 8
            width: 150
            height: 40
            model: ["无", "洗涤", "洗涤（高功率）"]
        }

        TextField {
            id: xdTimeTextField
            x: 239
            y: 100
            width: 150
            height: 40
            inputMask: ""
            anchors.top: modeNameTextField.bottom
            anchors.topMargin: 8
            anchors.left: xdComboBox.right
            anchors.leftMargin: 8
            placeholderText: qsTr("工作时间（分钟）")
        }

        TextField {
            id: xdTempTextField
            width: 150
            height: 40
            inputMask: ""
            anchors.left: xdTimeTextField.right
            anchors.leftMargin: 8
            anchors.top: modeNameTextField.bottom
            anchors.topMargin: 8
            placeholderText: qsTr("工作温度（°C）")
        }

        ComboBox {
            id: pxComboBox
            width: 150
            height: 40
            anchors.left: parent.left
            anchors.leftMargin: 8
            anchors.top: xdComboBox.bottom
            anchors.topMargin: 8
            model: ["无", "漂洗", "漂洗（高功率）"]
        }

        TextField {
            id: pxTimeTextField
            width: 150
            height: 40
            anchors.top: pxComboBox.top
            anchors.topMargin: 0
            anchors.left: pxComboBox.right
            anchors.leftMargin: 8
            placeholderText: qsTr("工作时间（分钟）")
        }

        TextField {
            id: pxTempTextField
            width: 150
            height: 40
            anchors.left: pxTimeTextField.right
            anchors.leftMargin: 8
            anchors.top: pxTimeTextField.top
            anchors.topMargin: 0
            placeholderText: qsTr("工作温度（°C）")
        }
        ComboBox {
            id: pxClearComboBox
            width: 150
            height: 40
            anchors.left: pxTempTextField.right
            anchors.leftMargin: 8
            anchors.top: pxTempTextField.top
            anchors.topMargin: 0
            model: ["不加", "小量清洗剂", "中量清洗剂", "大量清洗剂"]
        }

        ComboBox {
            id: xcomboBox
            width: 150
            height: 40
            anchors.left: parent.left
            anchors.leftMargin: 8
            anchors.top: pxClearComboBox.bottom
            anchors.topMargin: 8
            model: ["无", "高温消毒"]
        }

        TextField {
            id: xTimeTextField
            width: 150
            height: 40
            anchors.top: xcomboBox.top
            anchors.topMargin: 0
            anchors.left: xcomboBox.right
            anchors.leftMargin: 8
            placeholderText: qsTr("消毒次数")
        }

        TextField {
            id: xTempTextField
            width: 150
            height: 40
            anchors.top: xTimeTextField.top
            anchors.topMargin: 0
            anchors.left: xTimeTextField.right
            anchors.leftMargin: 8
            placeholderText: qsTr("工作温度（°C）")
        }
        ComboBox {
            id: xdyComboBox
            width: 150
            height: 40
            anchors.left: xTempTextField.right
            anchors.leftMargin: 8
            anchors.top: xTempTextField.top
            anchors.topMargin: 0
            model: ["不加", "小量助干剂", "中量助干剂", "大量助干剂"]
        }

        ComboBox {
            id: hgComboBox
            width: 150
            height: 40
            anchors.left: parent.left
            anchors.leftMargin: 8
            anchors.top: xcomboBox.bottom
            anchors.topMargin: 8
            model: ["无", "烘干", "烘干（高功率）"]
        }
        TextField {
            id: hgTimeTextField
            width: 150
            height: 40
            anchors.top: hgComboBox.top
            anchors.topMargin: 0
            anchors.left: hgComboBox.right
            anchors.leftMargin: 8
            placeholderText: qsTr("工作时间（分钟）")
        }

        Button {
            id: confirmButton
            x: 167
            y: 383
            width: 100
            height: 30
            text: qsTr("保存")
        }

        Button {
            id: button1
            x: 387
            y: 383
            width: 100
            height: 30
            text: qsTr("取消")
        }
    }

    Connections {
        target: addMouseArea
        onClicked: addRectange.visible = true
    }

    Connections {
        target: button1
        onClicked: addRectange.visible = false
    }
}
